<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho X Graph</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
      let graph = new ElGrapho({
        container: document.getElementById('container'),
        model: {
          nodes: [
            {x: -0.9, y: -0.9, group: 0},
            {x: 0.9,  y: -0.9, group: 1},
            {x: 0.9,  y: 0.9,  group: 2},
            {x: -0.9, y: 0.9,  group: 3},
            {x: 0,    y: 0,    group: 4}
          ],
          edges: [
            {from: 4, to: 0},
            {from: 4, to: 1},
            {from: 4, to: 2},
            {from: 4, to: 3}
          ],
        },
        width: 500,
        height: 500,
        animations: false
      });

    </script>
  </body>
</html>